* {
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}
body {
  display: flex; 
  justify-content: center;
  text-align: center; 
  background-color: #000; 
}
a {
  position: relative; 
  padding: 15px 20px;
  margin: 30px;
  color: #82ef9f; 
  font-size: 40px;
  text-decoration: none; 
  transition: 1s; 
  overflow: hidden; /* 超出隐藏 */
}
a:nth-child(1) {
  filter: hue-rotate(555deg); 
}
a:nth-child(2){
  filter: hue-rotate(333deg);
}
a:nth-child(3) {
  filter: hue-rotate(111deg);
}
a:hover {
  background-color: #2f51ec;
  color: rgb(59, 171, 208);
  box-shadow: 0 0 5px #f9f0f0; /* 高亮 */
  transition-delay: 0.2s; /* 等待时间 */
}
a::before { /* 左上边框*/
  content: ''; /* 内容 */
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-top: 4px solid #11e3d5; 
  border-left: 4px solid #11e3d5;
  transition: 0.6s;
  transition-delay: 0.3s;
}

a::after { /* 右下边框 */
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-bottom: 4px solid #11e3d5;
  border-right: 4px solid #11e3d5;
  transition: 0.6s;
  transition-delay: 0.2s;
}
a:hover::before,a:hover::after {
  width: 100%;
  height: 100%;
  /* 等待时间0,直接移动,防止按钮先变色 */
  transition-delay: 0s;
}